<template>
  <div ref="wrapper" class="wrapper">
    <div>
      <p class="list">当前城市</p>
      <button class="city">武汉</button>
      <p class="list-2">热门城市</p>
      <div class="hot">
        <button v-for="(item,index) of hotCities" :key="index" class="city">{{item.name}}</button>
      </div>
      <div v-for="(item,index) of cities" :key="index">
        <p class="list-2" :ref="index">{{index}}</p>
        <!-- ABCDE -->
        <div class="choice" v-for="(city,inx) of item" :key="inx">{{city.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "CityList",
  props: ["hotCities", "cities","letter"],
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {});
    });
  },
  watch:{
      letter(){
          var element = this.$refs[this.letter][0];
          console.log(this.$refs[this.letter][0])
          this.scroll.scrollToElement(element)
      }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 1200px;
  // overflow: hidden;
  position: relative;
  margin-top:176px;
}
.list {
  color: #555;
  background-color: #eee;
  padding: 15px;
  // margin-top: 120px;
}
.list-2 {
  color: #555;
  background-color: #eee;
  padding: 15px;
}
.city {
  width: 200px;
  padding: 12px;
  color: #555;
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  margin: 22px;
}
.hot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.choice {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-bottom: 1px solid #ddd;
}
.choice p {
  padding: 12px;
}
</style>
